<template>
  <div class="conts">
    <div class="das">
      <div class="iimgs">
        <!-- <div class="borde">
              <img src="../assets/tjlb/109951166572047043.jpg" alt="">
            </div> -->
      </div>
      <div class="mos">
        <span class="mins">全部歌单</span>
        <ul>
          <li
            v-for="(item, index) in lidae"
            :key="index"
            border="0"
            style="cursor: pointer"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <gedan :gedan="gedan1"></gedan>
    </div>
 
  </div>
</template>

<script>
import gedan from "../components/home/gedan.vue";
export default {
  components: {
    gedan,
  },
  data() {
    return {
      lidae: [
        "华语",
        "流行",
        "摇滚",
        "民谣",
        "电子",
        "独立",
        "轻音乐",
        "综艺",
        "影视原声",
        "ACG",
      ],
      gedan1: [
        {
          img: require("../assets/tjlb/109951166383336403.jpg"),
          tltie: "爆燃说唱｜炸裂技术流教学",
          bofang: "10万",
        },
        {
          img: require("../assets/tjlb/109951166536432691.jpg"),
          tltie: "【治愈晚风 让我做你的天使】",
          bofang: "20万",
        },
        {
          img: require("../assets/tjlb/109951166572047043.jpg"),
          tltie: "日子需要我们积极向上",
          bofang: "30万",
        },
        {
          img: require("../assets/tjlb/109951166665933162.jpg"),
          tltie: "日子需要我们积极向上",
          bofang: "30万",
        },
        {
          img: require("../assets/tjlb/109951166659498290.jpg"),
          tltie: "『国风纯音』宫商角徵 史诗震撼 恢弘大气",
          bofang: "30万",
        },
        {
          img: require("../assets/tjlb/109951166710178037.jpg"),
          tltie: "2022 全新的我",
          bofang: "35万",
        },
        {
          img: require("../assets/tjlb/109951166745339210.jpg"),
          tltie: "一些好听到爆的中文rap",
          bofang: "35万",
        },
        {
          img: require("../assets/tjlb/109951166633118539.jpg"),
          tltie: "那些好听到爆炸的歌曲",
          bofang: "35万",
        },
        {
          img: require("../assets/tjlb/109951166887745088.jpg"),
          tltie: "那些让人无法抵触的说唱",
          bofang: "35万",
        },
        {
          img: require("../assets/tjlb/109951166467562743.jpg"),
          tltie: "男声 | 好听到单曲循环的华语歌单（上）",
          bofang: "35万",
        },
      ],
    };
  },
  mounted() {
    console.log(this.gedan1);
    let a = this.gedan1.length - 1;
    for (let index = 0; index <= a; a--) {
      // console.log(this.gedan[a]);
      this.gedan1.push(this.gedan1[a]);
    }
  },
};
</script>

<style lang="less" scoped>
.conts {
  .das {
    padding-top: 80px;
    max-width: 1200px;
    padding-bottom: 140px;
    .iimgs {
      width: 100%;
      // background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);
      // background-image:repeating-radial-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);

      // background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
      // background-color: rgba(75, 77, 77, 0.226);
      background-image: url("../assets/img/109951166916281208.jpg");
      border-radius: 5px;
      // border: 1px solid #000;
      display: flex;
      align-items: center;
      height: 150px;
      //  filter: blur(4px);
      // margin-left: 10px;
      position: relative;
      .borde {
        height: 120px;
        width: 120px;
        border-radius: 5px;
        overflow: hidden;
        margin-left: 10px;
        position: absolute;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .mos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    ul {
      display: flex;
      li {
        margin-left: 20px;
        color: rgb(110, 110, 110);
      }
    }
    .mins {
      display: block;
      height: 30px;
      width: 90px;
      border-radius: 5px;
      border: 1px solid rgb(109, 109, 109);
      text-align: center;
      line-height: 30px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }

  @media only screen and (min-width: 800px) {
    // background-color:green;

    .das {
      //  max-width: 70%;

      margin: 0 auto;
      min-width: 650px;
      // border: 1px solid #000;
    }
  }

  .tujian {
    margin-bottom: 20px;
    margin-top: 10px;
  }
}
</style>